<script setup>
import { ref } from 'vue';
import {
  Search,
  ArrowDown
} from '@element-plus/icons-vue';
import {
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElInput,
} from 'element-plus';

// 城市相关数据
const city = ref('桂林');
const cityList = ref(['桂林', '北京', '上海', '广州', '深圳']);
// 搜索框绑定值
const searchQuery = ref('');

// 切换城市方法
const handleCityChange = (newCity) => {
  city.value = newCity;
  // 可在此处添加切换城市后的其他逻辑，比如请求对应城市的数据等
};
</script>

<template>
  <el-affix position="top" :offset="0">
  <div class="search-bar-container">
    <!-- 城市选择部分 -->
    <div class="city-select">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          {{ city }}<el-icon class="dropdown-icon"><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
                v-for="(item, index) in cityList"
                :key="index"
                @click="handleCityChange(item)"
            >
              {{ item }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 搜索框部分 -->
    <router-link :to="{name:'SearchView'}">
    <el-input
        v-model="searchQuery"
        placeholder="请输入搜索内容"
        class="search-input"
        :prefix-icon="Search"
    >

    </el-input>
    </router-link>
  </div>
  </el-affix>
</template>


<style scoped>
.search-bar-container {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.city-select {
  margin-right: 16px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
}

.dropdown-icon {
  margin-left: 4px;
  font-size: 14px;
}

.search-input {
  flex: 1;
}
</style>